<template>
	<scroll-view class="detail" scroll-y @scrolltolower='loadMore'>
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item>
				<view class="swiper-item">
					<image :src="goodsContent.imgUrl" mode=""></image>
				</view>
			</swiper-item>
		</swiper>

		<view class="detail-price">
			<view class="price-info">
				<view class="goods-pprice">￥{{goodsContent.pprice}}</view>
				<view class="goods-oprice">原价￥{{goodsContent.oprice}}</view>
			</view>
			<view class="goods-name">{{goodsContent.name}}</view>
			<view class="detail-discount">
				<view class="discount-item">
					<view class="iconfont icon-duigouzhong"></view>
					<view class="">7天无理由</view>
				</view>
				<view class="discount-item">
					<view class="iconfont icon-duigouzhong"></view>
					<view class="">48小时内发货</view>
				</view>
			</view>
		</view>

		<view class="detail-order">
			<view class="order-express">
				<view class="order-title">运费</view>
				<view class="order-price">￥10.00</view>
			</view>

			<view class="order-discount">
				<view class="order-title">领券</view>
				<view class="order-voucher">
					<view class="voucher-item">
						<view v-for="(item, index) in 5" :key="index">满699减60</view>
					</view>

					<view class="iconfont icon-xiangyou1"></view>
				</view>
			</view>

			<view class="order-brand">
				<view class="order-title">品牌</view>
				<view class="">奥特斯莱克</view>
			</view>
		</view>

		<view class="detail-shop">
			<view class="shop-img">
				<image src="@/static/img/banner1.jpg" mode=""></image>
			</view>

			<view class="shop-info">
				<view class="shop-name">奥特斯莱克自营店</view>

				<view class="goods-number">在售商品145件</view>
			</view>

			<view class="shop-btn">
				<view>查看店铺</view>
			</view>
		</view>

		<view class="detail-goods">
			<image v-for="(item, index) in testImg" :key="index" :src="item.imgUrl" mode=""></image>
		</view>

		<DetailCard :cardTitle="'看了又看'" />
		<CommodityList :dataList="barList" />

		<view class="load">
			{{loadText}}
		</view>

		<view class="detail-foot">
			<view class="iconfont icon-xiaoxi"></view>
			<view class="iconfont icon-gouwuche1" @click="goShopCart"></view>
			<view class="add-shopcart" @click="onPopShow()">加入购物车</view>
			<view class="purchase" @click="onPopShow(true)">立即购买</view>
		</view>

		<view class="pop" v-show="isPop" :animation="opacityData" @touchmove.step.prevent=''>
			<view class="pop-mask" @click="onPopHide"></view>

			<view class="pop-box" :animation="animationData">
				<view class="pop-goods">
					<view class="pop-img">
						<image :src="goodsContent.imgUrl" mode=""></image>
					</view>

					<view class="goods-info">
						<view class="goods-price">￥{{goodsContent.pprice}}</view>
						<view class="goods-total">可购33件</view>
						<view class="goods-selected">{{typeActive ? `已选:"${goodsContent.types[typeActive - 1]}"`:''}}
						</view>
					</view>

					<view class="iconfont icon-quxiao" @click="onPopHide"></view>
				</view>

				<view class="pop-category">
					<view class="pop-title">颜色分类</view>
					<view class="category-item">
						<view :class="typeActive == (index + 1)?'active': ''"
							v-for="(item, index) in this.goodsContent.types" :key="index" @click="onChangeClass(index)">
							{{item}}</view>
					</view>
				</view>

				<view class="pop-number">
					<view class="pop-title">购买数量</view>
					<UniNumberBox :min="1" :value="num" @change="changeNumber"></UniNumberBox>
				</view>

				<view class="pop-sub" @click="onSubmit">确定</view>
			</view>
		</view>

	</scroll-view>
</template>

<script>
	import DetailCard from '@/components/common/Card.vue'
	import CommodityList from '@/components/common/CommodityList.vue'
	import UniNumberBox from '@/components/uni/uni-number-box/uni-number-box.vue'
	import {
		getDetailData
	} from '@/api/detail.js'
	import {
		getIndexListData
	} from "@/api/index.js"
	import {
		// getShopCartList,
		// updateNumCart,
		addOrder
	} from '@/api/shop_cart.js'
	import {
		mapState,
		mapActions,
		mapGetters,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				goodsId: 0,
				pageSize: 1,
				num: 1,
				typeActive: 0,
				loadText: '',
				animationConfig: {},
				animationData: {},
				opacityConfig: {},
				opacityData: {},
				goodsContent: {},
				testImg: [{
						imgUrl: '../../static/img/detail1.jpg'
					},
					{
						imgUrl: '../../static/img/detail2.jpg'
					},
					{
						imgUrl: '../../static/img/detail3.jpg'
					},
					{
						imgUrl: '../../static/img/detail4.jpg'
					},
					{
						imgUrl: '../../static/img/detail5.jpg'
					}
				],
				barList: [],
				payStatic: false,
				isPop: false,
			}
		},
		components: {
			DetailCard,
			CommodityList,
			UniNumberBox
		},
		computed: {
		},
		async onLoad(e) {
			this.goodsId = await e.id
			await this.setAnimation()
			await this.getDetailInfo(this.goodsId);
		},
		//修改返回默认行为
		onBackPress() {
			if (this.isPop) {
				this.onPopHide();
				return true;
			}
		},
		//点击分享
		onNavigationBarButtonTap(e) {
			if (e.type === 'share') {
				uni.share({
					"provider": "weixin",
					"type": 0,
					"scene": "WXSceneSession",
					"title": this.goodsContent.name,
					"href": "http://192.168.101.3:8080/#/pages/details/details?id=" + this.goodsContent.id +
						"",
					imageUrl: this.goodsContent.imgUrl,
					success: function(res) {
						uni.showTabBar({
							title: "分享成功"
						})
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}

				})
			}
		},
		methods: {
			...mapState({
				list: state => state.cart.list,
				selectedList: state => state.cart.selectedList,
				payKey: state => state.cart.payKey
			}),
			...mapMutations(['addShopCart', 'initOrder', 'initGetData', 'setSelectList']),
			async getDetailInfo(id) {
				let res = await getDetailData({
					id
				})
				// console.log(res[0]);
				this.goodsContent = res[0]
			},
			async pay() {
				this.goodsContent.num = await this.num
				// console.log(this.goodsContent);
				let res = await addOrder({
					arr: [this.goodsContent]
				})
				await this.initOrder(res.data[0].order_id);
				this.initGetData([{...this.goodsContent, goods_id: this.goodsContent.id, checked: true}])
				this.setSelectList([this.goodsContent.id])
				await uni.navigateTo({
					url: `../confirm-order/confirm-order`
				})
			},
			shopCart() {
				let goods = this.goodsContent
				this.goodsContent.checked = false
				this.goodsContent.num = this.num
				this.addShopCart(goods)
				this.onPopHide()
				uni.showToast({
					title: '成功加入购物车',
					icon: 'none'
				})
			},
			setAnimation() {
				this.animationConfig = uni.createAnimation({
					duration: 0,
					timingFunction: 'step-end'
				})
				this.opacityConfig = uni.createAnimation({
					duration: 0,
					timingFunction: 'step-end'
				})
				// console.log(animationConfig);
				this.opacityConfig.opacity(0).step()
				this.opacityData = this.opacityConfig.export()

				this.animationConfig.translateY(600).step()
				this.animationData = this.animationConfig.export()
			},
			onPopShow(paystatic) {
				this.isPop = true
				this.payStatic = paystatic || false

				this.animationConfig.option = {
					delay: 0,
					transformOrigin: "50% 50% 0",
					duration: 400,
					timingFunction: "ease",
				}
				this.opacityConfig.option = {
					delay: 0,
					transformOrigin: "50% 50% 0",
					duration: 600,
					timingFunction: "ease",
				}

				this.opacityConfig.opacity(1).step()
				this.opacityData = this.opacityConfig.export()
				this.animationConfig.translateY(0).step()
				this.animationData = this.animationConfig.export()
			},
			onPopHide() {
				this.opacityConfig.opacity(0).step()
				this.opacityData = this.opacityConfig.export()
				this.animationConfig.translateY(600).step()
				this.animationData = this.animationConfig.export()
				setTimeout(() => {
					this.isPop = false
				}, 200)
			},
			loadMore() {
				this.loadText = '加载中...';
				this.addData()
				this.loadText = '上拉加载更多...';
			},
			async addData() {
				// console.log(this.pageSize);
				let res = await getIndexListData(2, this.pageSize)
				console.log(res);
				this.barList = [...this.barList, ...res[res.length - 1].data];
				this.pageSize++;
			},
			changeNumber(value) {
				this.num = value
			},
			goShopCart() {
				uni.navigateTo({
					url: '/pages/shopcart/shopcart'
				})
			},
			async onSubmit() {
				if(this.typeActive == await 0){
					return uni.showToast({
						title: '请选择商品种类',
						duration: 2000,
						icon: 'none'
					})
				}
				this.payStatic ? await this.pay() : await this.shopCart()
			},
			onChangeClass(index) {
				this.typeActive = index + 1
			}
		}
	}
</script>

<style lang="scss" scoped>
	.detail {
		height: calc(100vh - 90rpx);
		padding-bottom: 90rpx;
		background-color: $uni-bg-color-grey;

		swiper {
			width: 100%;
			height: 700rpx;

			image {
				width: 100%;
				height: 700rpx;
			}
		}

		.detail-price {
			font-weight: bold;
			font-size: 36rpx;
			padding-top: 20rpx;
			background-color: white;
			margin: 20rpx;
			border-radius: 20rpx;
			overflow: hidden;
			box-shadow: 0rpx 6rpx 18rpx rgba(0, 0, 0, .1);

			.price-info {
				display: flex;
				flex-direction: row;
				align-items: center;
				margin: 0 30rpx;
				color: tomato;

				.goods-pprice {
					font-size: 40rpx;
				}

				.goods-oprice {
					font-size: 30rpx;
					text-decoration: line-through;
					margin-left: 20rpx;
				}
			}

			.goods-name {
				letter-spacing: 2rpx;
				margin: 0 30rpx 20rpx 30rpx;
			}

			.detail-discount {
				display: flex;
				font-weight: normal;
				font-size: 32rpx;
				padding: 20rpx 30rpx;
				background-color: #f6f6f6;
				color: $uni-text-color-grey;

				.discount-item {
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: center;
					padding-right: 20rpx;

					.iconfont {
						font-size: 40rpx;
					}
				}
			}
		}

		.detail-order {
			display: flex;
			flex-direction: column;
			margin: 20rpx;
			padding: 0 20rpx;
			box-sizing: border-box;
			border-radius: 20rpx;
			box-shadow: 0rpx 6rpx 18rpx rgba(0, 0, 0, .1);
			background-color: white;

			>view {
				height: 54rpx;
				padding: 20rpx 0;
				position: relative;
				display: flex;

				>view {
					display: flex;
					align-items: center;
				}

				.order-title {
					flex: 1;
					color: $uni-text-color-grey;
				}

				>view:last-child {
					flex: 7;
				}
			}

			.iconfont {
				position: absolute;
				top: 22rpx;
				right: 0;
			}

			.order-discount {
				border-bottom: 1rpx solid #eee;

				.order-voucher {
					width: 100%;
					overflow: hidden;
					align-items: unset;

					.voucher-item {
						display: flex;
						flex-direction: row;
						flex-wrap: wrap;

						view {
							margin-bottom: 20rpx;
							padding: 0 10rpx;
							margin-right: 10rpx;
							border: 1rpx solid $uni-bg-color;
							border-radius: 10rpx;
							color: $uni-bg-color;
						}

					}

				}

			}

		}

		.detail-shop {
			display: flex;
			flex-direction: row;
			margin: 20rpx;
			padding: 20rpx;
			box-sizing: border-box;
			border-radius: 20rpx;
			box-shadow: 0rpx 6rpx 18rpx rgba(0, 0, 0, .1);
			background-color: white;

			.shop-img {
				flex: 1;

				image {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
				}
			}

			.shop-info {
				flex: 3;
				height: 100rpx;

				view {
					height: 50%;
					display: flex;
					align-items: center;
				}

				.shop-name {
					font-size: 34rpx;
					font-weight: bold;
				}

				.goods-number {
					color: $uni-text-color-grey;
				}

			}

			.shop-btn {
				display: flex;
				justify-content: center;
				align-items: center;
				color: white;

				view {
					display: flex;
					justify-content: center;
					align-items: center;
					// font-size: 32rpx;
					padding: 10rpx 30rpx;
					border-radius: 50rpx;
					background-color: black;
				}
			}

		}

		.detail-goods {
			image {
				display: block;
				width: 100%;
				// border: 1rpx solid black;
			}
		}

		.detail-foot {
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 90rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;
			background-color: white;
			font-size: 32rpx;

			>view {
				background-color: black;
				color: white;
			}

			.iconfont {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 60rpx;
				height: 60rpx;
				border-radius: 100%;
				text-align: center;
				margin: 0 10rpx;
				font-size: 32rpx;
			}

			.add-shopcart,
			.purchase {
				margin: 0 20rpx;
				padding: 6rpx 30rpx;
				border-radius: 50rpx;
			}

			.add-shopcart {}

			.purchase {
				background-color: $uni-text-color-active;
			}

		}

		.pop {
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 200;

			.pop-mask {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				background-color: rgba(0, 0, 0, .3);
			}

			.pop-box {
				position: absolute;
				left: 0;
				bottom: 0;
				width: 100%;
				height: 900rpx;
				padding: 20rpx;
				box-sizing: border-box;
				background-color: white;

				>view {
					border-bottom: 1rpx solid #eee;
				}

				.pop-title {
					font-weight: bold;
				}

				.pop-goods {
					position: relative;
					display: flex;
					box-sizing: border-box;

					.pop-img {
						position: relative;
						width: 240rpx;
						height: 200rpx;
						margin-right: 20rpx;

						image {
							position: absolute;
							top: -70rpx;
							width: 240rpx;
							height: 240rpx;
							background-color: #eee;
						}
					}

					.goods-info {
						display: flex;
						flex-direction: column;
						justify-content: center;
						margin-bottom: 20rpx;
						
						>view{
							flex: 1;
							display: flex;
							align-items: center;
						}
						
						.goods-price {
							font-size: 36rpx;
							color: $uni-text-color-active;
						}
					}

					.iconfont {
						position: absolute;
						top: 0;
						right: 0;
						color: $uni-text-color-grey;
						font-size: 50rpx;
					}

				}

				.pop-category {
					padding: 20rpx 0;

					.category-item {
						display: flex;
						flex-wrap: wrap;

						view {
							color: $uni-text-color;
							background-color: #eee;
							padding: 10rpx 20rpx;
							margin: 20rpx 20rpx 0 0;
							font-size: 26rpx;
							border-radius: 50rpx;
						}

						.active {
							color: white;
							background-color: $uni-text-color-active;
						}
					}
				}

				.pop-number {
					display: flex;
					justify-content: space-between;
					padding: 20rpx 0;
				}

				.pop-sub {
					position: absolute;
					width: 100%;
					bottom: 0;
					left: 0;
					line-height: 80rpx;
					background-color: $uni-text-color-active;
					color: white;
					text-align: center;
				}

			}

		}

		.load {
			height: 60rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-top: 1rpx solid #ccc;
		}
	}
</style>
